<template>
  <div id="app" class="grey-cloth-store">
    <better-scroll class="body-scroll" :data="greyStoreData" :total-page="totalPage" :pulldown="true" :pullup="true" @pullup="loadNextPageFn" @pulldown="() => loadGreyClothStoreDataFn(1)">
      <div v-for="greyStore in greyStoreData">
        <div class="data-card">
            <div style="border-bottom: 1px solid #8191c5; color: #1677FF;justify-content: space-between">
              <span style="color: #e6a23c">品名: {{ greyStore.designNo }}</span>
              <span style="color: #e6a23c">颜色: {{ greyStore.color }}</span>
            </div>
            <div style="justify-content: space-between">
              <span style="color: #e63c3c">预计:{{ greyStore.expectNum }}</span>
              <span style="color: #8191c5">流程:{{ greyStore.producingNum }}</span>
              <span style="color: #4b4949">临仓:{{ greyStore.tempStoreNum }}</span>
              <span style="color: #239a2a">大仓:{{ greyStore.largeStoreNum }}</span>
            </div>
        </div>
      </div>
    </better-scroll>
  </div>
</template>

<script>
import {loadGreyClothStoreData} from "@/api/cloth";


export default {
  name: "greyClothStore",
  data() {
    return {
      /* 查询相关 */
      queryParam: {
        designNo: "",
        color: "",
        pageNum: 1,
        pageSize: 6,
      },

      /* 列表相关 */
      greyStoreData: [],
      totalPage: 0,

    };
  },
  mounted() {

  },
  methods: {
    /* 设置查询参数 */
    fillQueryParamFn(keyLike, color) {
      const that = this;
      that.queryParam.designNo = keyLike;
      that.queryParam.color = color;
    },
    /* 加载布样数据 */
    loadGreyClothStoreDataFn(pageNum) {
      const that = this;
      if(pageNum == 1) {
        that.greyStoreData.splice(0, that.greyStoreData.length);
        that.queryParam.pageNum = pageNum;
      }
      loadGreyClothStoreData(that.queryParam, data => {
        that.totalPage = data.totalPage;
        data.list.forEach(greyCloth => {
          that.greyStoreData.push(greyCloth);
        });
      });
    },

    /* 加载下一页 */
    loadNextPageFn() {
      let that = this;
      that.queryParam.pageNum++;
      that.loadGreyClothStoreDataFn();
    },

  }
}
</script>

<style lang="scss" scoped>
.grey-cloth-store {
  height: 80%;
  ::v-deep .van-search {
    z-index: 1;
  }
  .body-scroll {
    height: 100%;
    .data-card {
      width: 92vw;
      padding: 0.5vh 2vw;
      margin-left: 2vw;
      background-color: white;
      margin-top: 1vh;
      box-shadow: 0.3rem 0.5rem 0.3rem #888888;
      display: flex;
      flex-flow: column;
      div {
        display: flex;
        padding: 0.3rem 0rem;
        span {
          line-height: 1rem;
        }
      }
    }
  }
}
</style>